<template>
  <div>
    <myDivider name="小区管理"></myDivider>
    <el-page-header @back="goBack" content="详情">
    </el-page-header>
    <!-- <div class="breadcrumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right" v-model="breadcrumbsData">
        <el-breadcrumb-item v-for="item in breadcrumbsData" :key="item.id" :label="item.shortName"> <a
            @click.prevent="tiktak(item.id)">{{ item.shortName }}</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="wholePage">

      <!-- 详情 -->
      <el-form ref="reinsertForm" :model="reinsertForm" label-width="80px" :inline="true" :rules="insertRules">
        <div>
          <el-form-item label="小区代号:" :label-width="formLabelWidth" class="formItemStyle" prop="numberCode">
            {{ reinsertForm.numberCode ? reinsertForm.numberCode : '--' }}
          </el-form-item>
        </div>
        <div>
          <el-form-item label="小区名称:" :label-width="formLabelWidth" class="formItemStyle" prop="name">
            <el-input disabled v-model="reinsertForm.name" autocomplete="off" style="width: 262px"></el-input>
          </el-form-item>

          <el-form-item label="所属管理处机构:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.affiliatedManagementCompanyName" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="所属管理处部门:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.affiliatedManagementDepartmentName" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>

          <el-form-item label="所属居委会机关:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.affiliatedAgencyName" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>

        <el-form-item label="所在地区:" :label-width="formLabelWidth" class="formItemStyle">
          <el-input disabled v-model="reinsertForm.areaName" autocomplete="off" style="width: 680px"></el-input>
        </el-form-item>

        <div>
          <el-form-item label="详细地址:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.address" autocomplete="off" style="width: 262px"></el-input>
          </el-form-item>

          <el-form-item label="开发商机构:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.developerCompanyName" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="承建商机构:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.contractorCompanyName" autocomplete="off"
              style="width: 262px"></el-input>
          </el-form-item>

          <el-form-item label="开工日期:" :label-width="formLabelWidth" class="formItemStyle">
            <el-date-picker disabled style="width: 262px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              v-model="reinsertForm.commencementDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="竣工日期:" :label-width="formLabelWidth" class="formItemStyle">
            <el-date-picker disabled style="width: 262px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              v-model="reinsertForm.completionDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="入伙日期:" :label-width="formLabelWidth" class="formItemStyle">
            <el-date-picker disabled style="width: 262px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              v-model="reinsertForm.checkInDate" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>

        <div>
          <el-form-item label="总建筑面积:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.totalBuildingArea" autocomplete="off"
              style="width: 242px"></el-input>
            ㎡
          </el-form-item>

          <el-form-item label="总占地面积:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.totalLandArea" autocomplete="off" style="width: 242px"></el-input>
            ㎡
          </el-form-item>
        </div>

        <div>
          <el-form-item label="绿化率百分比:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.greeningRate" autocomplete="off" style="width: 242px"></el-input>
            %
          </el-form-item>

          <el-form-item label="容积率:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.plotRatio" autocomplete="off" style="width: 242px"></el-input>
            %
          </el-form-item>
        </div>

        <div>
          <el-form-item label="说明:" :label-width="formLabelWidth" class="formItemStyle">
            <el-input disabled v-model="reinsertForm.illustrate" autocomplete="off" style="width:680px"></el-input>
          </el-form-item>
        </div>
        <div v-if="reinsertForm.pictureUrl">
          <el-form-item label="小区图片:" :label-width="formLabelWidth" class="formItemStyle">
            <el-image style="width: 100px; height: 100px" :src="reinsertForm.pictureUrl"
              :preview-src-list="[reinsertForm.pictureUrl]">
            </el-image>
          </el-form-item>
        </div>
      </el-form>
      <!-- 详情结束 -->

      <!-- 分割线 -->
      <el-divider></el-divider>



      <!-- tab页 -->
      <el-tabs type="border-card" v-model="activeName" @tab-click="aaa">
        <!-- 楼宇列表 -->
        <el-tab-pane name="building">
          <span slot="label"><i class="el-icon-school"></i> 小区楼宇</span>
          <div class="LouYuBox">
            <div>
              <!-- <el-input class="findValue" v-model="query.name" placeholder="名称" @keyup.enter.native="queryAddedStaffList"
                clearable></el-input>
              <el-button type="primary" style="margin-top: 20px; margin-left: 15px" icon="el-icon-search"
                @click="queryAddedStaffList">搜索</el-button> -->
              <div class="operation" style="margin-bottom: 10px;">
                <el-button type="success" icon="el-icon-plus" @click="openForm">新增</el-button>
                <el-button icon="el-icon-files" @click="ToBatchImport">批量导入</el-button>
              </div>
            </div>
            <div>
              <el-table :data="userData" style="width: 100%" class="menuTable" row-key="uid"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

                <el-table-column prop="name" label="楼宇名称">
                </el-table-column>

                <el-table-column prop="buildingPurposeName" label="建筑用途">
                </el-table-column>

                <el-table-column prop="buildingStructureName" label="建筑结构名称">
                </el-table-column>



                <el-table-column prop="buildingTowardName" label="建筑朝向">
                </el-table-column>

                <el-table-column prop="countOfFloors" label="楼层">
                </el-table-column>

                <el-table-column prop="height" label="高度（/m）">
                </el-table-column>
                <el-table-column label="操作" width="280px" fixed="right">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openDetailPage(scope.row)">详情</el-button>
                    <el-button type="primary" icon="el-icon-edit" size="mini"
                      @click="echoValueForUpdate(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="deleteAgencyById(scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>

            <myPagination :total="total" :pageNum="pageNum" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
            </myPagination>
          </div>
        </el-tab-pane>

        <!-- 服务电话 -->
        <el-tab-pane name="phone">
          <span slot="label"><i class="el-icon-phone-outline"></i> 服务电话</span>
          <div>
            <div class="PhoneTop">
              <div>
                <el-input style="width: 250px;margin-right: 10px;" v-model="keyName" placeholder="根据名称搜索"></el-input>
                <el-input style="width: 250px;margin-right: 10px;" v-model="keyNumber"
                  placeholder="根据联系电话搜索"></el-input>
                <el-button type="primary" @click="SouSuo">搜索</el-button>
                <el-button @click="reset">重置</el-button>
              </div>
              <el-button style="margin-top: 10px;" type="primary" @click="addPhone">新增</el-button>
            </div>

            <el-table :data="phoneData" style="width: 100%;margin-top: 20px">
              <el-table-column align="center" prop="name" label="名称">
              </el-table-column>
              <el-table-column align="center" prop="phoneNumber" label="联系电话">
              </el-table-column>
              <el-table-column align="center" prop="userName" label="最后修改人员">
              </el-table-column>
              <el-table-column align="center" prop="createTime" label="创建时间">
              </el-table-column>
              <el-table-column align="center" label="操作" width="120px">
                <template slot-scope="scope">
                  <div class="textBtn">
                    <el-row>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="updatePhone(scope.row)">编辑</span>
                      </el-col>
                      <el-col class="el" :span="12">
                        <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                          @click="deletePhone(scope.row)">删除</span>
                      </el-col>
                    </el-row>
                  </div>

                </template>
              </el-table-column>
            </el-table>


            <myPagination :total="phoneTotal" :pageNum="phonePageNum" @PageChange="phonePageChange"
              @pageSizeChange="phonePageSizeChange">
            </myPagination>
          </div>
        </el-tab-pane>

        <!-- 地图 -->
        <el-tab-pane name="map">
          <span slot="label"><i class="el-icon-location"></i> 详细位置</span>
          <div class="mapStyle">
            <div id="container"></div>
          </div>
        </el-tab-pane>

        <!-- 上传附件 -->
        <el-tab-pane class="FuJian" name="annex">
          <span slot="label"><i class="el-icon-folder-opened"></i> 相关附件</span>
          <div style="display: flex;justify-content: space-between;">
            <!-- 附件列表 -->
            <div style="width: 45%;">
              <el-divider content-position="left">附件列表</el-divider>
              <div class="fjlbBox">
                <div class="el" style="margin: 5px 0;" v-for="item, i in FuJianList" :key="i">
                  <span>{{ item }}</span>
                  <!-- 做到这了 -->
                  <span @click="download(item)">下载文件</span>

                </div>
              </div>
            </div>
            <!-- 上传附件 -->
            <div style="width: 45%;">
              <el-divider content-position="left">上传附件</el-divider>
              <myupload @Refresh="Refresh"></myupload>
            </div>
          </div>

        </el-tab-pane>
      </el-tabs>
      <!-- tab页结束 -->


      <!-- 新增手机号 -->
      <el-dialog :close-on-click-modal="false" ref="dialogVisible" :title="phonePopScene == 'add' ? '新增服务电话' : '修改服务电话'"
        :visible.sync="phonePopShow" width="500px">
        <el-form :rules="phonePopRules" ref="phonePopFormData" :model="phonePopFormData" label-width="120px">
          <el-form-item label="电话类型：" prop="category">
            <el-select style="width: 250px;" @change="SelectChange" v-model="phonePopFormData.category"
              placeholder="请选择电话类型">
              <el-option label="手机号" value="手机号"></el-option>
              <el-option label="座机" value="座机"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称：" prop="name">
            <el-input style="width: 250px;" maxlength="15" v-model="phonePopFormData.name"
              placeholder="请输入电话名称"></el-input>
          </el-form-item>
          <el-form-item label="电话号：" prop="phoneNumber">
            <el-input ref="SJH" style="width: 250px;" maxlength="20" v-model="phonePopFormData.phoneNumber"
              placeholder="请输入号码"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="phonePopShow = false">取 消</el-button>
          <el-button type="primary" @click="phonePopOk">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>





<script>
import axios from 'axios'
import AMapLoader from '@amap/amap-jsapi-loader';
import {
  getFatherAgencies,
  getDictionaryList,
  getInDetail,
  getPostListByDepId,
  addStaff,
  getAddedUserList,
  deleteStaff,
  getBreadcrumbs,
  updateStaff,
  getShangJiJiGouList,
  DelBuilding,
  Dowfile
} from "./residential";

export default {
  data() {
    var validatePass = (rule, value, callback) => { //手机号
      if (this.phonePopFormData.category == undefined) {
        callback(new Error('请先选择电话类型'));
      } else {
        let myrule
        switch (this.phonePopFormData.category) {
          case '手机号':
            myrule = /^1[3|4|5|7|8][0-9]\d{8}$/
            if (myrule.test(value)) {
              callback();
            } else {
              callback(new Error('请输入正确的手机号'));
            }
            break
          case '座机':
            myrule = /0\d{2,3}-\d{7,8}|\(?0\d{2,3}[)-]?\d{7,8}|\(?0\d{2,3}[)-]*\d{7,8}/
            if (myrule.test(value)) {
              callback();
            } else {
              callback(new Error('请输入正确的座机号'));
            }
            break
        }
      }
    };
    return {
      activeName: '',
      // 服务电话==================
      activeRow: {},
      phonePopRules: {
        category: [
          { required: true, message: '请选择电话类型', trigger: 'change' },
        ],
        name: [
          { required: true, message: '请输入电话名称', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入号码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
      },
      phonePopScene: 'add',
      phonePopShow: false,
      phonePopFormData: {},
      phoneData: [],
      phonePageNum: 1,
      phonePageSize: 10,
      phoneTotal: 0,
      keyName: '',
      keyNumber: '',
      // ================= 服务电话
      FuJianList: [],
      query: {
        //左上角查询input
        name: "",
      },
      //地图相关参数 START
      Marker: null,
      map: null,
      //地图相关参数 END
      options: [],
      fatherAgenciesOptionData: [],
      superAdministratorIdData: [],
      authenticationStatusData: [
        { name: '未认证', id: '0' },
        { name: '已认证', id: '1' },
      ],
      updateStaffId: 0,
      dialogFormVisible: false, //控制弹框开关
      formLabelWidth: "120px", //控制前面label的宽度
      reinsertForm: {
        shortName: '',
        superAdministratorId: '',
        type: '',
        fatherCompanyId: '',
        criCode: '',
        contactName: '',
        telephoneNumber: '',
        authenticationStatus: '',
        criLng: '',
        criLat: '',
      },
      insertRules: {
        phoneNumber: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "设备名称不能为空",
            trigger: "blur",
          },
        ],
      },
      operateType: 'insert',
      genderListData: [
        { id: '0', name: "女" }, { id: '1', name: "男" }
      ],
      fatherAgenciesOptionData: [],
      typeOptionData: [],
      agencyQuery: {
        name: "",
      },
      superAdminQuery: {
        userAccount: "",
        userName: ""
      },
      userQuery: {
        userAccount: "",
        userName: ""
      },
      insertUserQuery: {
        userAccount: "",
        userName: "",
        agencyDepartmentId: "",
        agencyPostId: "",
      },
      reinsertForm: {
        confirmType: 'insert',
      },
      breadcrumbsData: [], //面包屑数据
      agencyData: [], //下级机构数据
      userData: [], //已新增员工数据
      depmentManageData: [], //部门数据
      agencyPostListData: [], //岗位数据
      agencyPostDisabled: true, //岗位下拉框
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,

    }
  },

  activated() {

    if (this.$route.query.tabType) {
      this.activeName = this.$route.query.tabType
    } else {
      this.activeName = 'building'
    }
    // 查询楼宇列表
    this.queryAddedStaffList();
    this.getAgencyInfo(this.$route.query.id);
    this.operateType = 'binding'

    //面包屑
    // this.getBreadcrumbsData();

    this.getPhoneList()
    this.getAgencyTypeOptionData();
  },

  methods: {
    aaa() {
      console.log(this.activeName)
    },
    ToBatchImport() {
      this.$router.push(`/batchImport?name=楼宇信息导入&residentialId=${this.$route.query.id}`)
    },
    // 服务电话===========================================
    phonePopOk(formName) {
      this.$refs['phonePopFormData'].validate(async (valid) => {
        if (valid) {
          switch (this.phonePopScene) {
            case 'add':
              {
                let res = await this.$api.phone.insertPhone({
                  "category": this.phonePopFormData.category, //电话类型
                  "name": this.phonePopFormData.name, //名称
                  "phoneNumber": this.phonePopFormData.phoneNumber, //电话号
                  "residentialId": this.$route.query.id //小区id
                })
                if (res.code == 200) {
                  this.phonePopShow = false
                  this.$message({
                    message: '新增成功',
                    type: 'success'
                  });
                  this.getPhoneList()
                } else {
                  this.$message.error(res.message)
                }
              }
              break
            case 'update':
              {
                let res = await this.$api.phone.updatePhone({
                  "id": this.activeRow.id,
                  "category": this.phonePopFormData.category,
                  "name": this.phonePopFormData.name, //名称
                  "phoneNumber": this.phonePopFormData.phoneNumber, //电话号
                  "residentialId": this.$route.query.id
                })
                if (res.code == 200) {
                  this.phonePopShow = false
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.getPhoneList()
                } else {
                  this.$message.error(res.message)
                }
              }
              break
          }
        }
      });
    },
    SelectChange() {
      this.$set(this.phonePopFormData, 'phoneNumber', '')
    },
    addPhone() {
      this.phonePopScene = 'add'
      this.phonePopShow = true
      this.$set(this.phonePopFormData, 'category', '')
      this.$set(this.phonePopFormData, 'name', '')
      this.$set(this.phonePopFormData, 'phoneNumber', '')
      this.$nextTick(() => { this.$refs['phonePopFormData'].clearValidate() })

    },
    async updatePhone(row) {
      this.phonePopScene = 'update'
      this.activeRow = row
      let res = await this.$api.phone.getPhoneDetail(row.id)
      if (res.code == 200) {
        this.phonePopShow = true
        this.$set(this.phonePopFormData, 'category', res.data.category)
        this.$set(this.phonePopFormData, 'name', res.data.name)
        this.$set(this.phonePopFormData, 'phoneNumber', res.data.phoneNumber)
        this.$nextTick(() => { this.$refs['phonePopFormData'].clearValidate() })
      } else {
        this.$message.error(res.message)
      }
    },
    async deletePhone(row) {
      this.$confirm('是否删除该号码?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$api.phone.deletePhone(row.id)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getPhoneList()
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {

      });

    },
    phonePageChange(e) {
      this.phonePageNum = e
      this.getPhoneList()
    },
    phonePageSizeChange(e) {
      this.phonePageNum = 1
      this.phonePageSize = e
      this.getPhoneList()
    },
    SouSuo() {
      this.phonePageNum = 1
      this.getPhoneList()
    },
    reset() {
      this.keyName = ''
      this.keyNumber = ''
      this.getPhoneList()
    },
    async getPhoneList() {
      let res = await this.$api.phone.getPhoneList({
        "name": this.keyName, //名称
        "phoneNumber": this.keyNumber,//电话号
        "residentialId": this.$route.query.id, //小区id
        "pageSize": this.phonePageSize,
        "pageNum": this.phonePageNum
      })
      console.log(res, '服务电话');
      if (res.code == 200) {
        if (res.data.list.length < 1 && this.phonePageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
          this.phonePageNum = 1
          this.getPhoneList()
          return
        }
        this.phoneData = res.data.list
        this.phoneTotal = res.data.total
      } else {
        this.$message.error(res.message)
      }
    },
    // =========================================服务电话
    Refresh() {
      this.getAgencyInfo(this.$route.query.id);
    },
    async download(item) {
      let soa_account = sessionStorage.getItem("soa_account");
      const token = sessionStorage.getItem("soa_token")
      axios({
        method: 'get',
        url: defaultUrl + `/business/residentialQuarters/downloadAnnex?id=${this.$route.query.id}&filename=${item}`,
        headers: {
          // 在这里添加自己需要的请求头
          account: soa_account,
          token: token,
        },
        responseType: 'blob'
      }).then(res => {
        const url = window.URL.createObjectURL(new Blob([res.data]))
        const a = document.createElement('a')
        a.href = url
        a.setAttribute('download', item)
        document.body.appendChild(a)
        a.click();
        document.body.removeChild(a)
      })

    },
    // 打开新增楼宇页面
    openForm() {
      this.$router.push({
        path: '/building/buInsert',
        query: {
          operateType: 'insert',
          residentialId: this.$route.query.id
        }
      })
    },
    //打开楼宇详情
    openDetailPage(row) {
      var id = row.id;
      this.$router.push({
        path: '/building/buDetail',
        query: { id: id }
      }, () => {
        // location.reload();//刷新页面
      })
    },
    //修改楼宇信息
    echoValueForUpdate(row) {
      console.log(row);
      this.$router.push({
        path: '/building/buInsert',
        query: {
          id: row.id,
          operateType: 'update',
          residentialId: this.$route.query.id
        }
      })
    },
    //删除楼宇
    async deleteAgencyById(row) {
      this.$confirm('确定要删除该楼宇信息吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await DelBuilding(row.id)
        console.log(res, '删除楼宇');
        if (res.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.message,
            type: "warning"
          });
        }
        this.queryAddedStaffList()

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    // 定位详细坐标
    positioning(val) {

      // 设置中心点
      this.map.setCenter([val.lon, val.lat])

      // 设置高度
      this.map.setZoom([15])

      // 如果之前添加个散点那么就去除
      if (this.Marker != null) {
        this.Marker.remove()
        console.log('删除marker', this.Marker);
      }

      // 添加散点
      this.Marker = new AMap.Marker({
        position: new AMap.LngLat(val.lon, val.lat),
        title: val.title,
        anchor: 'bottom-center',
      })
      this.map.add(this.Marker);
    },
    ShowMap(val) {
      let that = this
      this.$nextTick(() => {
        // 如果地图为空 则初始化地图
        if (this.map == null) {
          AMapLoader.load({
            key: "b59ffa4664995330f554d4aedc02b03c", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
          })
            .then((AMap) => {
              that.map = new AMap.Map("container", {
                // 设置地图容器id
                // viewMode: "3D", // 是否为3D地图模式
                // zoom: 11, // 初始化地图级别
                // center: [116.397428, 39.90923], // 初始化地图中心点位置
              });
              that.positioning(val)
            })
            .catch((e) => {
              console.log(e);
            });
        } else {
          this.positioning(val)
        }
      })
    },
    handleChange() {

    },


    /**
     *  上一页
     */
    goBack() {
      // this.$router.push({ path: '/residential/reManagement' });
      this.$router.go(-1)
    },




    /**
     * 获取类型字典数据
     */
    getAgencyTypeOptionData() {
      getDictionaryList("agency_type").then((res) => {
        this.typeOptionData = res.data;
      })
    },



    // 获取机构详情
    getAgencyInfo(id) {
      getInDetail(id).then((res) => {
        if (res.annexPath) {
          // 处理附件列表
          let nameList = []
          JSON.parse(res.annexPath).forEach(el => {
            let lastSlashIndex = el.lastIndexOf('/');
            let filename = el.substring(lastSlashIndex + 1);
            nameList.push(filename)
          })
          this.FuJianList = nameList
        }


        this.reinsertForm = res
        let req = {
          lon: this.reinsertForm.longitude,
          lat: this.reinsertForm.latitude,
          title: this.reinsertForm.name
        }
        console.log(req, '地图信息');
        this.ShowMap(req)
      })
    },









    PageChange(e) {
      this.pageNum = e
      this.queryAddedStaffList()
    },
    pageSizeChange(e) {
      this.pageSize = e
      this.queryAddedStaffList()
    },
    //按条件查询账号列表
    queryAddedStaffList() {
      getAddedUserList({
        residentialQuartersId: this.$route.query.id,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      ).then((res) => {
        console.log(res, '楼宇列表');
        this.userData = res.list;
        // this.pageNum = res.pageNum;
        // this.pageSize = res.pageSize;
        this.total = res.total;
      });
    },


    //查询岗位
    getPostListByDepId() {
      getPostListByDepId(
        this.insertUserQuery.agencyDepartmentId[this.insertUserQuery.agencyDepartmentId.length - 1],
      ).then((res) => {
        this.agencyPostListData = res.data;
      });
    },
    //部门选择变动事件
    departmentChangeEvent() {
      if (this.insertUserQuery.agencyDepartmentId.length > 0) {
        this.agencyPostDisabled = false;
      } else {
        this.agencyPostDisabled = true;
      }
      this.getPostListByDepId();


    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //添加员工
    addStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        addStaff(agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '添加员工成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.queryAddedStaffList();

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },
    //删除员工
    deleteStaffById(row) {
      var staffId = row.id;
      this.$confirm("确认删除该员工吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {

        deleteStaff(staffId).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.queryAddedStaffList();
          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });

      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
        return;
      });

    },

    //查询面包屑数据
    getBreadcrumbsData() {
      console.log(this, '??????');
      var agencyId = this.$route.query.id;

      getBreadcrumbs(agencyId).then((res) => {
        console.log(res, '面包屑数据');
        let arr = []
        res.forEach(el => {
          if (el != null) {
            arr.push(el)
          }
        })
        this.breadcrumbsData = arr;
      });

    },

    tiktak(id) {
      this.$router.replace({
        path: '/residential/reDetail',
        query: { id: id }
      }, () => {
        location.reload();//刷新页面
      })

    },



    updateStaff() {
      var agencyId = this.$route.query.id;
      var depIds = this.insertUserQuery.agencyDepartmentId;
      var postIds = this.insertUserQuery.agencyPostId;

      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请先选择至少一个账号进行绑定',
          type: "warning",
        });
        return;
      }
      if (depIds == "") {
        this.$message({
          message: '请选择部门',
          type: "warning",
        });
        return;
      }
      if (postIds == "") {
        this.$message({
          message: '请选择岗位',
          type: "warning",
        });
        return;
      }


      var tempUserId = "";
      if (this.multipleSelection) {


        if (this.multipleSelection.length > 1) {
          this.$message({
            message: '只能选一个账号进行修改',
            type: "warning",
          });
          return;
        }


        this.multipleSelection.forEach(row => {
          tempUserId = tempUserId + "," + row.id
        });
        var userId = tempUserId.substring(1)



        updateStaff(this.updateStaffId, agencyId, userId, depIds, postIds).then((res) => {
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.$nextTick(() => {
              this.queryAddedStaffList();
            })

          } else {
            this.$message({
              message: res.message,
              type: "warning",
            });
          }
        });
      }
    },



  }
};
</script>

<style lang="less" scoped>
.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}

.FuJian {
  /deep/ .el-divider {
    height: 2px !important;
    background-image: linear-gradient(90deg, rgb(0, 123, 255), rgb(196, 232, 17));
  }

  .fjlbBox {
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;

    .el {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        &:nth-child(2) {
          color: rgb(6, 113, 190);
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}



.mapStyle {
  height: 350px;
  width: 100%;

  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }
}

.wholePage {
  margin-top: 50px;
  margin-left: 130px;
  height: 50%;
}

.breadcrumbs {
  margin-top: 20px;
  margin-left: 13px;
  height: 50%;
}

.menuTable {
  margin-top: 40px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.menuTable .cell {
  text-align: center;
}

.findValue {
  width: 13%;
  margin-top: 20px;
  margin-left: 15px;
}

.operation {
  margin-right: 50px;
  float: right;
  margin-top: 20px;
}

.formStyle {
  width: 1780px;
  margin: 20px auto;
}

.formItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}

.pageFooter {
  margin-top: 3%;
  margin-left: 40%;
}

.pageFooterFather {
  top: 84%;
  position: relative;
  width: 100%;
}

.el-cascader-menu {
  height: fit-content;
  width: fit-content;
}


.birthdayDateItemStyle {
  margin-bottom: 28px;
  margin-left: 22px;
}
</style>